<template>
    <div class="app-container">


		<div class='srf-card' v-if="orgAccount!=null && orgAccount.htAccountNo!=null">
			<div class="srf-top">
				<img class="icon" src="@/assets/rong/icon_house.png" alt="" />
				<div>{{orgAccount.orgName}}</div>
			</div>
			<div class="srf-cont">
				<div class="srf-item">
					<div class="t">宝付支付账号：{{orgAccount.htAccountNo}}</div>
					<div class="d">
						线下打款子账号 [ 户名：宝付网络科技(上海)有限公司 开户行：宝付网络-备付金账户 账号：{{orgAccount.accountNo}} ]
					</div>
				</div>
				<div class="srf-item ">
					<div class="price">
						{{orgAccount.availAmount}} 元
					</div>
				</div>
				<div class="srf-item">
					<div class="status">
						<span class="t" v-if="orgAccount.htAccountNo==null">未开户</span>
						<span class="t" v-else>已开户</span>
					</div>
				</div>
				<div class="srf-item flex-center" >
					<div @click="handleAdd('editbank')" class="tx"  style="cursor: pointer;">绑卡</div>
					<div @click="handleAdd('withdrawdata')" class="tx" style="display: none;">提现</div>
					<!-- 
					<div class="sz" >
						<el-dropdown>
							<span class="el-dropdown-link">
								设置
								<el-icon class="el-icon--right">
									<arrow-down />
								</el-icon>
							</span>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item>
										<div @click="handleAdd('editphone')">更换手机号</div>
									</el-dropdown-item>
									<el-dropdown-item>
										<div @click="handleAdd('editpaypwd')">修改密码</div>
									</el-dropdown-item>
									<el-dropdown-item>
										<div>注销</div>
									</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
				 -->
				</div>
			</div>
		</div>



        <div class="app-page">
            <el-form class="search-form" :model="form" :rules="rules" ref="formRef" :inline="true" label-width="160px">
                <div class="app-item">
                    <div class="app-title">完善公司信息<span v-if="form.bfStatus==3" style="padding-left: 20px;font-size: 14px;color: #FF6201;">审核状态：{{form.bfInfo}}</span></div>
                    <div class="app-cont">
                        <el-form-item class="form-item v50 fold_label" :label="'营业执照\n(图片不超过5M\n,jpg,png格式)'" prop="license">
                            <el-upload ref="refUpload" class="upload-demo avatar-uploader" accept="image/jpg,image/jpeg,image/png" action="#" :show-file-list="false"
                                :http-request="($event) => { httpRequest($event, 1) }">
                                <el-avatar v-if="form.license" :src="checkUrl(form.license)" shape="square" :size="178"
                                    fit="contain" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>

                        </el-form-item>
						<el-form-item class="form-item v50 fold_label" :label="'银行开户许可证\n(图片不超过5M\n,jpg,png格式)'" prop="accountOpenFile">
						    <el-upload class="upload-demo avatar-uploader" accept="image/jpg,image/jpeg,image/png"  action="#" :show-file-list="false"
						        :http-request="($event) => { httpRequest($event, 0) }">
						        <el-avatar v-if="form.accountOpenFile" :src="checkUrl(form.accountOpenFile)" shape="square" :size="178"
						            fit="contain" />
						        <el-icon v-else class="avatar-uploader-icon">
						            <Plus />
						        </el-icon>
						    </el-upload>
						
						</el-form-item>
                        <el-form-item class="form-item v30" label="公司名称" prop="orgName">
                            <el-input class="search-vitem" v-model="form.orgName" placeholder="公司名称" clearable />
                        </el-form-item>
                        <el-form-item class="form-item v30" label="注册资本" prop="registeredCapital">
							<el-input-number class="search-vitem" min="1" v-model="form.registeredCapital" controls-position="right" placeholder="注册资本" clearable/>
                        </el-form-item>
                        <el-form-item class="form-item v30" label="营业执照号" prop="businessLicenseNo">
                            <el-input class="search-vitem" v-model="form.businessLicenseNo" placeholder="营业执照号" clearable />
                        </el-form-item>
                        <el-form-item class="form-item v30" label="营业执照有效期开始" prop="businessLicenseStartExpired">
                            <el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="search-vitem"
                                v-model="form.businessLicenseStartExpired" type="date" placeholder="营业执照有效期开始" />
                        </el-form-item>
						<el-form-item class="form-item v30" label="营业执照有效期结束" prop="businessLicenseExpired">
						    <el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="search-vitem"
						        v-model="form.businessLicenseExpired" type="date" placeholder="若为长期，则不填写" />
						</el-form-item>
						<el-form-item class="form-item v30" label="公司邮箱" prop="email">
						    <el-input class="search-vitem" v-model="form.email" placeholder="公司邮箱" clearable />
						</el-form-item>
                        <el-form-item class="form-item" label="注册地址" prop="citycode">
                            <el-cascader v-model="form.citycode" :options="cityOpt" :props="CascaderProps" />
                            <el-input class="search-vitem v-address2" v-model="form.address" placeholder="请输入详细注册地址"
                                clearable />
                        </el-form-item>
						<el-form-item class="form-item" label="企业联系详细地址" prop="citycode2">
						    <el-cascader v-model="form.citycode2" :options="cityOpt" :props="CascaderProps" />
						    <el-input class="search-vitem v-address2" v-model="form.street" placeholder="请输入详细企业联系详细地址"
						        clearable />
						</el-form-item>
						<el-form-item class="form-item v30" label="银行账户" prop="accountNo">
						    <el-input class="search-vitem" v-model="form.accountNo" placeholder="银行账户" clearable />
						</el-form-item>
						<el-form-item class="form-item v30" label="联行号" prop="settleId">
						    <el-input style="width: 250px;" v-model="form.settleId" placeholder="联行号" clearable />
							<span>
							<el-button link type="primary" @click="cardInfo()">查询联行号</el-button>
							</span>
						</el-form-item>

					   <el-form-item class="form-item v30" label="行业" prop="orgIndustry">
							<el-select class="search-vitem" v-model="form.orgIndustry" clearable filterable
					           placeholder="行业">
							   <el-option
								 v-for="dict in bf_org_industry"
								 :key="dict.value"
								 :label="dict.label"
								 :value="dict.value"
							   />
							 </el-select>   
					   </el-form-item>
					  
					   <el-form-item class="form-item v30" label="机构类型" prop="types">
					       <el-select class="search-vitem" v-model="form.types" clearable filterable
					           placeholder="机构类型">
							   <el-option
							   								 v-for="dict in org_type"
							   								 :key="dict.value"
							   								 :label="dict.label"
							   								 :value="parseInt(dict.value)"
							   />
					          
					       </el-select>
					   </el-form-item>
                       
						<el-form-item class="search-vitem v50" label="经营范围" prop="businessScope">
							<el-input type="textarea" :rows="4" placeholder="经营范围"
							    v-model="form.businessScope">
							</el-input>
						</el-form-item>
                    </div>
                </div>

                <div class="app-item">
                    <div class="app-title">法人信息</div>
                    <div class="app-cont">
                        <el-form-item class="form-item v50 fold_label" :label="'法人身份证正面\n(图片不超过5M\n,jpg,png格式)'" prop="legalIdcFront">
                            <el-upload class="upload-demo avatar-uploader" accept="image/jpg,image/jpeg,image/png" action="#" :show-file-list="false"
                                :http-request="($event) => { httpRequest($event, 2) }">
                                <el-avatar v-if="form.legalIdcFront" :src="checkUrl(form.legalIdcFront)" shape="square" :size="178"
                                    fit="contain" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>

                        </el-form-item>


                        <el-form-item class="form-item v30 fold_label" :label="'法人身份证反面\n(图片不超过5M\n,jpg,png格式)'" prop="legalIdcBack">
                            <el-upload class="upload-demo avatar-uploader" accept="image/jpg,image/jpeg,,image/png" action="#" :show-file-list="false"
                                :http-request="($event) => { httpRequest($event, 3) }">
                                <el-avatar v-if="form.legalIdcBack" :src="checkUrl(form.legalIdcBack)" shape="square" :size="178"
                                    fit="contain" />
                                <el-icon v-else class="avatar-uploader-icon">
                                    <Plus />
                                </el-icon>
                            </el-upload>

                        </el-form-item>

                        <el-form-item class="form-item v30" label="法人姓名" prop="legalName">
                            <el-input class="search-vitem" v-model="form.legalName" placeholder="法人姓名" clearable />
                        </el-form-item>
                        <el-form-item class="form-item v30" label="法人身份证号码" prop="legalIdcard">
                            <el-input class="search-vitem" v-model="form.legalIdcard" placeholder="法人身份证号码" clearable />
                        </el-form-item>
                       <el-form-item class="form-item v30" label="法人手机号码" prop="legalMobile">
                           <el-input class="search-vitem" v-model="form.legalMobile" placeholder="法人手机号码" clearable />
                       </el-form-item>
						<el-form-item class="form-item v30" label="身份证有效期开始" prop="legalIdcardStartExpired">
						    <el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="search-vitem"
						        v-model="form.legalIdcardStartExpired" type="date" placeholder="身份证有效期开始" />
						</el-form-item>
                        <el-form-item class="form-item v30" label="身份证有效期" prop="legalIdcardExpired">
                            <el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="search-vitem"
                                v-model="form.legalIdcardExpired" type="date" placeholder="若为长期，则不填写" />
                        </el-form-item>
                       
                        <el-form-item class="form-item v30" label="法人是否为公司实控人" prop="isActual">
                            <el-switch v-model="form.isActual" active-value="1" inactive-value="0" active-color="#FF6201"
                                inactive-color="#EEEEEE">
                            </el-switch>
                        </el-form-item>
						<el-form-item class="form-item" label="法人身份证地址" prop="legalIdcAddress">
						    <el-input class="search-vitem v-address3" v-model="form.legalIdcAddress" placeholder="法人身份证地址"
						        clearable />
						</el-form-item>

                    </div>
                </div>

                <div class="app-item">
                    <div class="app-title">联系人</div>
                    <div class="app-cont">

                        <el-form-item class="form-item v30" label="姓名" prop="businessName">
                            <el-input class="search-vitem" v-model="form.businessName" placeholder="姓名" clearable />
                        </el-form-item>
						<el-form-item class="form-item v30" label="身份证号码" prop="businessIdcard">
						    <el-input class="search-vitem" v-model="form.businessIdcard" placeholder="身份证号码" clearable />
						</el-form-item>
						<el-form-item class="form-item v30" label="身份证有效期" prop="businessIdcardExpired">
						    <el-date-picker format="YYYY-MM-DD" value-format="YYYY-MM-DD" class="search-vitem"
						        v-model="form.businessIdcardExpired" type="date" placeholder="若为长期，则不填写" />
						</el-form-item>
                        <el-form-item class="form-item v30" label="联系电话" prop="businessMobile">
                            <el-input class="search-vitem" v-model="form.businessMobile" placeholder="联系电话" clearable />
                        </el-form-item>
                        <el-form-item class="form-item v30" label="联系邮箱" prop="businessEmail">
                            <el-input class="search-vitem" v-model="form.businessEmail" placeholder="联系邮箱" clearable />
                        </el-form-item>


                    </div>
                </div>
				
				<div class="app-item">
				    <div class="app-title">受益人/控股股东<spn style="font-size: 12px;color: #FF6201;"> (受益人：至少一个;控股股东：至少一个)</spn></div>
				    <div class="app-cont">
						
						<el-table :data="form.beneficiaryItems" border style="width: 100%">
							<el-table-column label="类型">
								<template #default="scope">
									 <dict-tag :options="bf_org_partner_type" :value="scope.row.type"/>       
								</template>
							</el-table-column>
							<el-table-column prop="beneficiaryName" label="姓名">
							</el-table-column>
							<el-table-column prop="beneficiaryIdType" label="证件类型">
								<template #default="scope">
									 <dict-tag :options="bf_card_type" :value="scope.row.beneficiaryIdType"/>       
								</template>
							</el-table-column>
							<el-table-column prop="beneficiaryIdNo" label="证件号">
							</el-table-column>
							<el-table-column prop="beneficiaryPhone" label="手机号码">
							</el-table-column>
							<el-table-column prop="beneficiaryIdEffDate" label="证件生效日期">
							</el-table-column>
							<el-table-column label="操作">
								<template #default="scope">
									
									<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row,'beneficiaryItem')" >修改</el-button>
									<el-popconfirm width="220"  @confirm="handDel(scope.row)"  confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF" title="您是否确定删除？">
										<template #reference>
											<el-button link type="primary" icon="Delete">删 除</el-button>
										</template>
									</el-popconfirm>
								</template>
							</el-table-column>
						</el-table>
						
						<el-button  @click="handleAdd('beneficiaryItem')" class="showbtn">
							<el-icon>
								<Plus />
							</el-icon>
							<span>受益人/控股股东</span>
						</el-button>
						
					</div>
                </div>
                <div class="flex-center">
					<el-button type="primary" @click="submitForm('tempSave')">保存草稿</el-button>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                </div>
            </el-form>
        </div>


		<el-dialog title="受益人/控股股东" v-model="beneficiaryItem.open" width="1200px" append-to-body>
			<div class="dialog-custom">
				<!-- 申请批次 -->
				<div class="dialog-main">
					
						<!-- 申请信息 -->
						<div class="dialog-item">
							<div class="dialog-tbox">
								<span>受益人/控股股东</span>
							</div>
							<div class="dialog-cont">
							
								
								<el-form ref="beneficiaryItemRef" :inline="true" :model="beneficiaryItem.form" :rules="beneficiaryItem.rules" label-width="140px">
						
									<el-form-item label="类型" prop="type" label-width="140px">
										<el-select class="search-vitem" v-model="beneficiaryItem.form.type" clearable filterable placeholder="类型">
											<el-option
											  v-for="dict in bf_org_partner_type"
											  :key="dict.value"
											  :label="dict.label"
											  :value="dict.value"
											/>
										</el-select>
									</el-form-item>
									
									<el-form-item label="证件类型" prop="beneficiaryIdType" label-width="140px">
										<el-select class="search-vitem" v-model="beneficiaryItem.form.beneficiaryIdType" clearable filterable placeholder="证件类型">
											<el-option
											  v-for="dict in bf_card_type"
											  :key="dict.value"
											  :label="dict.label"
											  :value="dict.value"
											/>
										</el-select>
									</el-form-item>

									<el-form-item label="姓名" prop="beneficiaryName">
										<el-input class="search-vitem" v-model="beneficiaryItem.form.beneficiaryName" placeholder="姓名" clearable />
									</el-form-item>



									<el-form-item label="手机号码" prop="beneficiaryPhone">
										<el-input class="search-vitem" v-model="beneficiaryItem.form.beneficiaryPhone" placeholder="手机号码" clearable />
									</el-form-item>

									<el-form-item label="证件号码" prop="beneficiaryIdNo">
										<el-input class="search-vitem" v-model="beneficiaryItem.form.beneficiaryIdNo" placeholder="证件号码" clearable />
									</el-form-item>

									<el-form-item label="证件生效日期" prop="beneficiaryIdEffDate">
										<el-date-picker v-model="beneficiaryItem.form.beneficiaryIdEffDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="证件生效日期" />
									</el-form-item>



									<el-form-item label="证件有效期" prop="beneficiaryIdOffDate">
										<el-date-picker v-model="beneficiaryItem.form.beneficiaryIdOffDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="如果为长期有效，则不填写" />
									</el-form-item>
									<el-form-item label="证件地址" class="form-item v100" prop="beneficiaryAddress">
										<el-input   v-model="beneficiaryItem.form.beneficiaryAddress" placeholder="证件地址" clearable />
									</el-form-item>

								</el-form>

								

							</div>
						</div>
					
				</div>

			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="cancel('beneficiaryItem')">取 消</el-button>
					<el-button type="primary" @click="submitForm('beneficiaryItem')">提交</el-button>
				</div>
			</template>
		</el-dialog>

		
		<el-dialog title="绑定银行" v-model="editbank.open" width="600px" append-to-body>
			<div class="dialog-custom">
				<div class="dialog-main">
					<el-form ref="bankRef" :inline="true" :model="editbank.form" :rules="editbank.rules" label-width="140px">
						<div class="dialog-item">
							<div class="dialog-tbox" v-if="editbank.form.status!=null">
								绑卡状态：<span v-if="editbank.form.status==2" style="color: #FF6201;">已绑定</span>
								<span v-else-if="editbank.form.status==3" style="color: #FF6201;">失败</span>
								<span v-else style="color: #FF6201;">审核中</span>
							</div>
							<div class="dialog-cont">
							
								<el-form-item class="v100" label="对公账户名称" prop="accName">
									<el-input class="search-vitem v100" v-model="editbank.form.accName" readonly placeholder="对公账户名称" disabled />
								</el-form-item>
								<el-form-item class="v100" label="对公账户卡号" prop="accNo">
									<el-input class="search-vitem v100" v-model="editbank.form.accNo" placeholder="对公账户卡号" clearable />
								</el-form-item>
								<el-form-item class="v100" label="开户行名称" prop="bankName">
									<el-input class="search-vitem v100" v-model="editbank.form.bankName" placeholder="开户行名称" clearable />
								</el-form-item>
								<el-form-item class="v100" label="开户行号" prop="bankCode">
									<el-input class="search-vitem v100" v-model="editbank.form.bankCode" placeholder="开户行号" clearable />
								</el-form-item>
								
							</div>
						</div>
					</el-form>
				</div>
			</div>
			<template #footer>
				<div class="dialog-footer" v-if="editbank.form.status==null || editbank.form.status==2 || editbank.form.status==3">
					<el-button @click="cancel('editbank')">取 消</el-button>
					<el-button type="primary" @click="submitForm('editbank')">确 定</el-button>
				</div>
			</template>
		</el-dialog>
		
    </div>
</template>

<script setup name="Company">
import { ElMessage, ElLoading } from 'element-plus'
import {checkUrl,getCardInfo} from "@/api/tool/tool";
import {uploadByServer,IdCardOCRFace, IdCardOCRBack, BusinessLicense} from "@/api/tool/ocr";
import {regionList} from "@/api/tool/region";
import {saveBank,getUserOrg,saveOrg,getOrgBankInfo} from "@/api/company/org";

const { proxy } = getCurrentInstance();
const { org_type,bf_org_industry,bf_card_type,bf_org_partner_type} = proxy.useDict('org_type','bf_org_industry','bf_card_type','bf_org_partner_type');


const data = reactive({
    // 省市区 参数
    CascaderProps: {
        value: 'name',
        label: 'name',
        children: 'list',
    },
    cityOpt: [],
    // 省市区 参数 END
    companyStatusArr: [], //  开业状态
    orgTypeArr: [], // 机构类型
    companyNatureArr: [], //  公司性质
	
	// 修改绑定银行
	editbank: {
		open: false,
		form: {
			accName: null,
		},
		resetForm: {
			accName: null,
			accNo: null,
			bankName: null,
			bankCode: null,
		},
		rules: {
			accName: [
				{ required: true, message: "银行账户名称不能为空", trigger: "blur" }
			],
			accNo: [
				{ required: true, message: "银行账号不能为空", trigger: "blur" }
			],
			bankName: [
				{ required: true, message: "开户行名称不能为空", trigger: "blur" }
			],
			bankCode: [
				{ required: true, message: "开户行号不能为空", trigger: "blur" }
			],
		}
	},
	
	
	orgAccount: {
		tenantId: null,
		walletNo: null,
		accountNo: null,
		htAccountNo: null,
		balance: null,
		frozenAmount: null,
		availAmount: null,
		orgName: null,
		isBindBank: null,
	},

	beneficiaryItem:{
		open:false,
		form:{
			index: -1,
		},
		resetForm: {
			index: -1,
			type: null,
			beneficiaryName: null,
			beneficiaryIdType: null,
			beneficiaryIdNo: null,
			beneficiaryIdEffDate: null,
			beneficiaryIdOffDate: null,
			beneficiaryPhone: null,
			beneficiaryAddress: null,
			},
		rules:{
			type: [
			    { required: true, message: "请选择类型", trigger: "blur" }
			],
			beneficiaryName: [
			    { required: true, message: "姓名不能为空", trigger: "blur" }
			],
			beneficiaryIdType: [
			    { required: true, message: "请选择证件类型", trigger: "blur" }
			],
			beneficiaryIdNo: [
			    { required: true, message: "证件号码不能为空", trigger: "blur" }
			],
			beneficiaryIdEffDate: [
			    { required: true, message: "生效日期不能为空", trigger: "blur" }
			],
			beneficiaryPhone: [
			    { required: true, message: "手机号码不能为空", trigger: "blur" }
			],
			beneficiaryAddress: [
			    { required: true, message: "证件地址不能为空", trigger: "blur" }
			],
		},
	},

    form: {
		beneficiaryItems:[],
		
    },
    resetForm: {
		citycode:[],
		citycode2:[],
		beneficiaryItems:[],
		accountOpenFile:null,
		accountNo:null,
		settleId:null,
		orgName:null,
		email:null,
		license:null,
		types:null,
		businessLicenseNo:null,
		businessLicenseStartExpired:null,//营业执照有效期开始
		businessLicenseExpired:null,//营业执照有效期结束
		registeredCapital:null,//注册资本
		businessScope:null,//企业经营范围
		regProvince:null,
		regCity:null,
		regCountry:null,
		address:null,//注册地址
		province:null,//企业联系地址-省
		city:null,//企业联系地址-市
		country:null,//企业联系地址-区
		street:null,//企业联系详细地址
		orgIndustry:null,//行业
		legalName:null,
		legalIdcFront:null,
		legalIdcBack:null,
		legalIdcard:null,
		legalIdcAddress:null,
		legalIdcardStartExpired:null,
		legalIdcardExpired:null,
		legalMobile:null,
		businessName:null,
		businessIdcard:null,
		businessIdcardExpired:null,
		businessMobile:null,
		businessEmail:null,
    },
    rules: {
        beneficiaryItems: [
            { required: true, message: "受益人/控股股东不能为空", trigger: "blur" }
        ],
		accountOpenFile: [
		    { required: true, message: "开户许可证不能为空", trigger: "blur" }
		],
        accountNo: [
            { required: true, message: "银行账户不能为空", trigger: "blur" }
        ],
        citycode: [
            { required: true, message: "地址不能为空", trigger: "blur" }
        ],
		citycode2: [
		    { required: true, message: "地址不能为空", trigger: "blur" }
		],
		types: [
		    { required: true, message: "请选择机构类型", trigger: "blur" }
		],
        settleId: [
            { required: true, message: "联行号不能为空", trigger: "blur" }
        ],
        orgName: [
            { required: true, message: "公司名称不能为空", trigger: "blur" }
        ],
        email: [
            { required: true, message: "邮箱为空", trigger: "blur" },
            { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        license: [
            { required: true, message: "营业执照不能为空", trigger: "blur" }
        ],
        businessLicenseNo: [
            { required: true, message: "营业执照号不能为空", trigger: "blur" }
        ],
        businessLicenseStartExpired: [
            { required: true, message: "营业执照开始日期不能为空", trigger: "blur" }
        ],
       

        registeredCapital: [
            { required: true, message: "注册资本不能为空", trigger: "blur" }
        ],
        businessScope: [
            { required: true, message: "经营范围不能为空", trigger: "blur" }
        ],
       
        address: [
             { required: true, message: "地址不能为空", trigger: "blur" }
        ],
        
		street: [
		    { required: true, message: "地址不能为空", trigger: "blur" }
		],
		orgIndustry: [
		    { required: true, message: "请选择行业", trigger: "blur" }
		],
		legalName: [
		    { required: true, message: "法人姓名不能为空", trigger: "blur" }
		],
		legalIdcFront: [
		    { required: true, message: "身份证正面不能为空", trigger: "blur" }
		],
		legalIdcBack: [
		    { required: true, message: "身份证反面不能为空", trigger: "blur" }
		],
		legalIdcard: [
		    { required: true, message: "身份证不能为空", trigger: "blur" }
		],
		legalIdcAddress: [
		    { required: true, message: "法人身份证地址不能为空", trigger: "blur" }
		],
		legalIdcardStartExpired: [
		    { required: true, message: "身份证有效期开始不能为空", trigger: "blur" }
		],
		legalMobile: [
		   { required: true, message: "电话不能为空", trigger: "blur" },
		   { pattern: /^1[3456789]\d{9}$/, message: '联系电话不格式不正确', trigger: 'blur' }
		],
		businessName: [
		    { required: true, message: "姓名不能为空", trigger: "blur" }
		],
		businessIdcard: [
		    { required: true, message: "证件号码不能为空", trigger: "blur" }
		],
		
		businessMobile: [
		   { required: true, message: "电话不能为空", trigger: "blur" },
		   { pattern: /^1[3456789]\d{9}$/, message: '联系电话不格式不正确', trigger: 'blur' }
		],
		businessEmail: [
		   { required: true, message: "邮箱为空", trigger: "blur" },
		   { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
		],

    }
});

const { editbank,orgAccount,beneficiaryItem,form, rules, cityOpt, CascaderProps, companyStatusArr, orgTypeArr, companyNatureArr } = toRefs(data);

	function handleAdd(type) {
		reset(type);
		if (type == 'beneficiaryItem') {
			beneficiaryItem.value.open = true;
		} 
		else if (type == 'editbank') {
			editbank.value.open = true;
			
			getOrgBankInfo({}).then(response => {
			    var data = response.data;
				if(data!=null)
				{
					editbank.value.form=data;
				}
				editbank.value.form.accName=orgAccount.value.orgName;
				});
		} 
	}
	
	function handleUpdate(item,type)
	{
		beneficiaryItem.value.form=item;
		var index = -1;
		for (let i = 0; i < form.value.beneficiaryItems.length; i++) {
			var vdata = form.value.beneficiaryItems[i];
			if (vdata.type == item.type && vdata.beneficiaryIdNo == item.beneficiaryIdNo) {
				index = i;
			}
		}
		beneficiaryItem.value.form.index=index;
		beneficiaryItem.value.open = true;
	}
	
	function reset(type) {
		if (type == 'beneficiaryItem') {
			beneficiaryItem.value.form = JSON.parse(JSON.stringify(beneficiaryItem.value.resetForm));
			proxy.resetForm("beneficiaryItemRef");
	
		}
		else if (type == 'editbank') {
			editbank.value.form = JSON.parse(JSON.stringify(editbank.value.resetForm));
			proxy.resetForm("bankRef");
	
		}
	}	
	 
	 function cancel(type) {
	 
	 	if (type == 'beneficiaryItem') {
	 		beneficiaryItem.value.open = false;
	 	}
		else if (type == 'editbank') {
			editbank.value.open = false;
		}
	 	reset(type);
	 }




// 上传文件
function httpRequest(data, type) {
    var formData = new FormData();
    formData.append("file", data.file);
	formData.append("localType", 1);
	
	let fileSize = parseInt(data.file.size / 1024 / 1024) <= 5;
	
	if (!fileSize) {// 检查文件大小
	 
	  ElMessage({
	  	message: '图片大小不能超过5M! 请重新上传',
	  	type: 'warning',
	  })
	  return
	}
	
	if (type == 0) {
	    uploadByServer(formData).then(res => {
	    	var url = res.data.src;
	    	if (url) {
	    		form.value.accountOpenFile = url;
	    	}
	    
	    }).catch(err => {})
	} 
    else if (type == 1) {
        getBusinessLicense(formData)
    } else if (type == 2) {
        getIdCardOCRFace(formData)
    } else if (type == 3) {
        getIdCardOCRBack(formData)
    }
}
// 所有省市区
function getRegionList() {
    regionList({ threeLevel: 3 }).then(response => {
        var data = response.data;
        cityOpt.value = data;
    });
}

function cardInfo(){
	var accountNo=form.value.accountNo;
	if(accountNo==null || accountNo=='')
	{
		ElMessage({
			message: '请先填写银行卡号',
			type: 'warning',
		})
		return
	}
	
		getCardInfo(accountNo).then(response => {
			 var data = response.data;
			form.value.settleId=data.bankCode;
			 });
	
	
}



function getOrgInfo() {
    getUserOrg({}).then(response => {
        var data = response.data;


        // data.types = data.types.split(',');
		if(data!=null)
		{
			form.value = data.userOrg;
			if(data.userOrg.beneficiaryItems==null)
			{
				form.value.beneficiaryItems=[];
			}
			orgAccount.value=data.orgAccount;
			form.value.citycode = [data.userOrg.regProvince, data.userOrg.regCity, data.userOrg.regCountry];
			form.value.citycode2 = [data.userOrg.province, data.userOrg.city, data.userOrg.country];
		}
        

        // console.log(form.value);

    });
}


// 营业执照识别
function getBusinessLicense(formData) {
   
    BusinessLicense(formData).then(response => {
        var data = response.data;
        if (data && data.creditCode) {
            form.value.orgName = data.companyName;
            form.value.businessLicenseNo = data.creditCode;
            form.value.license = data.url;
			// form.value.registeredCapital = data.registeredCapital;
			form.value.businessScope = data.businessScope;
			form.value.businessLicenseStartExpired= data.validFromDate;
            // 处理日期
            // var dateString = data.registrationDate;
            // var formattedDate = dateString.replace(/年|月/g, "-").replace(/日/g, "");
            // var timedate = new Date(formattedDate);
            // var timestamp = timedate.getTime();
            // var t = timestampToTime(timestamp);
            // form.value.establishmentDate = happenTimeFun(t, 'yyyy-MM-dd');
        }
       
    }).catch(() => {
       
    });
}

function getIdCardOCRFace(formData) {
   
    IdCardOCRFace(formData).then(response => {
        var data = response.data;
        if (data && data.idNumber) {
            form.value.legalIdcard = data.idNumber;
            form.value.legalName = data.name;
            form.value.legalIdcAddress = data.address;
            form.value.legalIdcFront = data.url;
        }
       
    }).catch(() => {
       
    });
}

function getIdCardOCRBack(formData) {
   
    IdCardOCRBack(formData).then(response => {
        var data = response.data;
        if (data && data.url) {
            form.value.legalIdcBack = data.url;

			let arr=data.validPeriod.split('-');
			
			form.value.legalIdcardStartExpired =arr[0].replace(/\./g,'-');
			if(arr[1]==="长期")
			{
				form.value.legalIdcardExpired ='';
			}
			else{
				form.value.legalIdcardExpired =arr[1].replace(/\./g,'-');
			}
        }
       
    }).catch(() => {
       
    });
}

function handDel(item) {
		if (!item) {
			return
		}
		var index = -1;
		for (let i = 0; i < form.value.beneficiaryItems.length; i++) {
			var vdata = form.value.beneficiaryItems[i];
			if (vdata.type == item.type && vdata.beneficiaryIdNo == item.beneficiaryIdNo) {
				index = i;
			}
		}
		if (index >= 0) {
			form.value.beneficiaryItems.splice(index, 1);
		}

	}

// 提交保存
function submitForm(type) {
	if (type == 'beneficiaryItem') {
		proxy.$refs["beneficiaryItemRef"].validate(valid => {
			 if (valid) {
				 var formdata = JSON.parse(JSON.stringify(beneficiaryItem.value.form));
				if (formdata.index >= 0) {
					form.value.beneficiaryItems.splice(formdata.index, 1);
				}
				 form.value.beneficiaryItems.push(formdata);
				 beneficiaryItem.value.open = false;
				}
			});
	}
	else if (type == 'editbank') {
		proxy.$refs["bankRef"].validate(valid => {
			 if (valid) {				 
				 saveBank(editbank.value.form).then(response => {
				   proxy.$modal.msgSuccess("绑卡成功");
				    editbank.value.open = false;
				    orgAccount.value.isBindBank=1;
				 });
				}
			});
	}
	else if(type == 'tempSave')
	{
		var formdata = JSON.parse(JSON.stringify(form.value));
		if(formdata.citycode2.length==3)
		{
			formdata.province = formdata.citycode2[0];
			formdata.city = formdata.citycode2[1];
			formdata.country = formdata.citycode2[2];
		}
		if(formdata.citycode.length==3)
		{
			formdata.regProvince = formdata.citycode[0];
			formdata.regCity = formdata.citycode[1];
			formdata.regCountry = formdata.citycode[2];
		}
		formdata.orgStatus=0;
		// formdata.types = formdata.types.join(',');
		const loadingInstance = ElLoading.service({});
		saveOrg(formdata).then(response => {
		    loadingInstance.close();
		    ElMessage({
		        message: '保存成功',
		        type: 'success',
		    })
		}).catch(() => {
		    loadingInstance.close();
		});
	}
	else
		{
			proxy.$refs["formRef"].validate(valid => {
			    if (valid) {
			        var formdata = JSON.parse(JSON.stringify(form.value));
					if(formdata.beneficiaryItems.filter(item=>item.type=='01').length<1)
					{
						ElMessage({
							message: '受益人：至少一个;控股股东：至少一个',
							type: 'warning',
						})
						return
					}
					if(formdata.beneficiaryItems.filter(item=>item.type=='02').length<1)
					{
						ElMessage({
							message: '受益人：至少一个;控股股东：至少一个',
							type: 'warning',
						})
						return
					}
			        formdata.province = formdata.citycode2[0];
			        formdata.city = formdata.citycode2[1];
					formdata.country = formdata.citycode2[2];
					formdata.regProvince = formdata.citycode[0];
					formdata.regCity = formdata.citycode[1];
					formdata.regCountry = formdata.citycode[2];
					formdata.orgStatus=1;
			        // formdata.types = formdata.types.join(',');
			        const loadingInstance = ElLoading.service({});
			        saveOrg(formdata).then(response => {
			            loadingInstance.close();
			            ElMessage({
			                message: '提交成功',
			                type: 'success',
			            })
			        }).catch(() => {
			            loadingInstance.close();
			        });
			    }
			});
		}
    // proxy.$refs["companyRef"].validate(valid => {
    //     if (valid) {
    //         var formdata = JSON.parse(JSON.stringify(form.value));
    //         formdata.province = formdata.citycode[0];
    //         formdata.city = formdata.citycode[1];
    //         // formdata.types = formdata.types.join(',');
    //         const loadingInstance = ElLoading.service({});
    //         CompanyUpdate(formdata).then(response => {
    //             loadingInstance.close();
    //             ElMessage({
    //                 message: '提交成功',
    //                 type: 'success',
    //             })
    //         }).catch(() => {
    //             loadingInstance.close();
    //         });
    //     }
    // });
}

getOrgInfo();
getRegionList();

</script>

<style lang="scss">
.app-container {
    width: 100%;
    background: #f0f2f5;

    .app-page {
        width: 100%;
        background: #FFFFFF;
        padding-bottom: 40px;

        .app-item {
            width: 100%;
        }

        .app-title {
            width: 100%;
            height: 55px;
            line-height: 55px;
            font-style: normal;
            font-weight: 400;
            font-size: 16px;
            color: rgba(0, 0, 0, .85);
            border-bottom: 1px solid #e9e9e9;
            padding: 0 32px;
        }

        .app-cont {
            width: 100%;
            padding: 20px;
        }
    }
}


	.srf-card {
		width: 100%;
		background: #FFFFFF;
		border: 1px solid #F5F5F5;
		box-shadow: 0px 4px 6px 0px rgba(10, 2, 4, 0.03);

		.srf-top {
			width: 100%;
			height: 38px;
			line-height: 38px;
			background: #FEF3EB;
			padding: 0 24px;
			display: flex;
			align-items: center;
			color: #333333;
			font-size: 16px;
			font-weight: 550;

			.icon {
				width: 14px;
				height: 14px;
				display: block;
				margin-right: 16px;
			}
		}

		.srf-cont {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px 56px;
			box-sizing: border-box;

			.srf-item {

				.t {
					color: #666666;
					font-size: 14px;
					line-height: 1;
				}

				.d {
					color: #989898;
					font-size: 12px;
					line-height: 1;
					margin-top: 10px;
				}

				.price {
					color: #666666;
					font-size: 12px;
				}

				.tx {
					line-height: 1;
					color: #FF6201;
					font-size: 12px;
					padding-right: 12px;
					position: relative;
					margin-right: 12px;

					&::after {
						content: '';
						width: 1px;
						height: 12px;
						background: #F5F5F5;
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						z-index: 2;
					}
				}

				.sz {
					line-height: 1;
					color: #666666;
					font-size: 12px;

					.el-dropdown-link {
						color: #666666 !important;
						font-size: 12px;
					}
				}

				.status {
					.t {
						position: relative;
						color: #1FBD2E;
						font-size: 12px;
						padding-left: 12px;

						&::after {
							content: '';
							width: 5px;
							height: 5px;
							background: #2FBC3D;
							border-radius: 50%;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							z-index: 2;
						}
					}
				}
			}

		}

	}



.fold_label {
        white-space: pre-line;
    }


.form-item {
    width: 100%;
	&.v30 {
        width: 30%;
    }
    &.v50 {
        width: 45%;
    }
	&.flex_1 {
		width: auto !important;
		flex: 1 !important;
	}
}

.search-form {
    margin-top: 20px;

    .search-vitem {
        width: 100% !important;

        &.v-address1 {
            width: 30% !important;
        }

        &.v-address2 {
            width: 62% !important;
        }

        &.v-address3 {
            width: 92% !important;
        }
    }
}


	.dialog-custom {
		flex: 1;
		background: #f5f9ff !important;
		padding: 20px;
		height: 100%;
		// width: 100%;

		.dialog-main {
			width: 100%;
			height: 100%;
			overflow-y: auto;

			.dialog-item {
				width: 100%;
				border-radius: 10px;
				background: #FFFFFF;
				overflow: hidden;


				&:not(:first-child) {
					margin-top: 20px;
				}

				.dialog-tbox {
					width: 100%;
					height: 48px;
					padding: 0 40px;
					font-size: 16px;
					font-weight: 550;
					border-bottom: 1px solid #e4efff;
					display: flex;
					align-items: center;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						left: 20px;
						top: 50%;
						transform: translateY(-50%);
						width: 3px;
						height: 14px;
						background: #FF6201;
					}

					.tips {
						font-size: 12px;
						padding-left: 14px;
						color: red;
						font-weight: normal;
					}
				}

				.dialog-cont {
					width: 100%;
					padding: 30px;
					box-sizing: border-box;
				}

				.c-tips {
					background-color: #fffbe6;
					padding: 8px 15px 8px 15px;
					display: flex;
					align-items: flex-start;
					margin-bottom: 20px;
					line-height: 1.5;

					.icon {
						color: #faad14;
						margin-top: 4px;
					}

					.c-t {
						color: #f7ba1e;
						font-size: 14px;
						margin-left: 10px;
					}
				}

				.w-tip {
					padding: 0 20px;
					color: #faad14;
					font-size: 12px;
				}

				.search-fitem {
					width: 100%;

					&.v70 {
						width: 63.5%;
					}

					&.v50 {
						width: 45%;
					}
				}

				.showbtn {
					width: 100%;
					margin-top: 20px;
				}

				.showtips {
					padding-left: 140px;
					font-size: 14px;
					color: red;
				}

				.file-box {
					width: 100%;
					margin-top: 20px;

					.file-title {
						padding-left: 16px;
						position: relative;
						font-size: 16px;
						font-weight: 550;
						line-height: 1;

						&:after {
							content: '';
							width: 3px;
							height: 100%;
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							left: 0;
							background: #FF6201;
						}
					}

					.file-cont {
						margin-top: 20px;
					}
				}

				.step {
					display: flex;
					width: 100%;
					background: #f6faff;
					margin-bottom: 60px;

					.step-item {
						position: relative;
						padding: 15px 30px;
						background: #f6faff;

						.content {
							color: #50565d;
							width: 250px;

							div {
								margin-block: 5px;
							}
						}

						.bottom {
							position: absolute;
							bottom: -35px;
							width: 100%;

							.text {
								position: absolute;
								top: 25px;
								left: -13px;
								width: 50px;
								text-align: center;
							}

							.round {
								width: 24px;
								height: 24px;
								background-color: #FF6201;
								border-radius: 50%;
							}

							.line {
								display: inline-block;
								width: 100%;
								height: 4px;
								background-color: #FF6201;
								position: absolute;
								top: 50%;
								transform: translateY(-50%);
								margin-right: 15px;
							}
						}
					}
				}

			}
		}


		.el-form-item {
			width: 45%;

			&.vvv0 {
				width: 20%;
			}

			&.vvv1 {
				width: 29%;
			}


			&.vvv2 {
				width: 35%;
			}

			&.v100 {
				width: 95%;
			}

			.search-vitem {
				width: 220px !important;

				&.v40 {
					width: 40% !important;
				}

				&.v60 {
					width: 60% !important;
				}

				&.v100 {
					width: 100% !important;
				}

				&.flex_1 {
					width: auto !important;
					flex: 1 !important;
				}
			}
		}


		.show-tt {
			position: relative;
			color: #50565d;
			font-size: 14px;
			display: block;
			margin-bottom: 25px;
			margin-left: -10px;
			padding-left: 15px;
			font-weight: 700;

			&::after {
				content: "";
				position: absolute;
				top: 50%;
				left: 0;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
				background-color: #ee4e41;
			}
		}

	}



.showbtn {
					width: 100%;
					margin-top: 20px;
				}
</style>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: flex;
    align-items: cen;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #8c939d;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s;
}

.avatar-uploader .el-upload:hover {
    border-color: #FF6201;
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>